<template>
    <div style="height: 100%;width: 100%">
        <div class="header">
            <el-button type="primary" icon="el-icon-edit" @click="add">新增</el-button>
        </div>
        <div class="main">
            <div class="table">
                <vue-scroll>
                    <el-table
                            :data="tableData"
                            border
                            style="width: 100%;max-width:1600px;height: 100%;padding: 15px 20px;border-radius: 5px;box-shadow: 1px 1px 5px #ccc;">
                        <el-table-column
                                type="index"
                                width="80">
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="学院名"
                                width="400">
                        </el-table-column>
                        <el-table-column
                                prop="desc"
                                label="描述"
                                width="400">
                        </el-table-column>
                        <el-table-column
                                label="操作">
                            <template slot-scope="scope">
                                <el-button type="primary" icon="el-icon-edit" @click="edit(scope.row)">编辑</el-button>
                                <el-button type="primary" icon="el-icon-delete" @click="del(scope.row)">删除</el-button>
                                <el-button type="primary" icon="el-icon-delete" @click="showMajor(scope.row)">查看专业</el-button>
                                <el-button type="primary" icon="el-icon-delete" @click="addMajor(scope.row)">增加专业</el-button>

                            </template>
                        </el-table-column>
                    </el-table>
                </vue-scroll>
            </div>
            <div class="main-footer">
                <el-pagination
                        :current-page="page.page"
                        :page-sizes="[20, 50, 100]"
                        :page-size="page.rows"
                        layout="total,sizes,prev,pager,next,jumper"
                        background
                        :total="page.total"
                        @size-change="handleSizeChange"
                        @current-change="handlePageNumChange"
                />
            </div>
        </div>
        <el-dialog :visible.sync="formDataVisible" :title="dialogtitle"
                   top="40px" :close-on-click-modal="false" width="500px">
            <el-form ref="form" :model="formData" label-width="100px" label-suffix="：">
                <el-form-item label="学院名">
                    <el-input v-model="formData.name" placeholder="学院名"/>
                </el-form-item>
                <el-form-item label="描述">
                    <el-input type="textarea" v-model="formData.desc">

                    </el-input>
                </el-form-item>

            </el-form>

            <div>
                <el-button @click="formDataVisible=false;">取消</el-button>
                <el-button type="primary" @click="submitEvent">确定</el-button>
            </div>
        </el-dialog>
        <el-dialog :visible.sync="majorDataVisible" :title="dialogtitle"
                   top="40px" :close-on-click-modal="false" width="500px">
            <el-form ref="form" :model="major" label-width="100px" label-suffix="：">
                <el-form-item label="专业名">
                    <el-input v-model="major.name" placeholder="专业名"/>
                </el-form-item>
                <el-form-item label="描述">
                    <el-input type="textarea" v-model="major.desc">

                    </el-input>
                </el-form-item>

            </el-form>

            <div>
                <el-button @click="majorDataVisible=false;">取消</el-button>
                <el-button type="primary" @click="submitMajorEvent">确定</el-button>
            </div>
        </el-dialog>
        <el-dialog :visible.sync="majorTableVisible" :title="dialogtitle"
                   top="40px" :close-on-click-modal="false" width="800px">
            <el-table
                    :data="formData.majors"
                    border
                    style="width: 100%;max-width:1600px;height: 100%;padding: 15px 20px;border-radius: 5px;box-shadow: 1px 1px 5px #ccc;">
                <el-table-column
                        type="index"
                        width="80">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="专业名"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="desc"
                        label="描述"
                        width="200">
                </el-table-column>
                <el-table-column
                        label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" @click="eidtMajor(scope.row)">编辑</el-button>
                        <el-button type="primary" icon="el-icon-delete" @click="delMajor(scope.row)">删除</el-button>

                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
    import collegeApi from "../../api/collegeApi";
    import commonMethod from "../../util/commomMethods";

    export default {
        name: "listinfo",
        data() {
            return {
                dialogtitle:"",
                formDataVisible:false,
                majorDataVisible:false,
                majorTableVisible:false,
                tableData: [],
                page: {page: 1, rows: 20, total: 0},
                formData:{
                    desc: null,
                    id: "",
                    majors: [{id: "", name: "", desc: "", pid: null}],
                    name: "",},
                major:{id: "", name: "", desc: "", pid: null}
            }
        },
        mounted() {
            this.init();
        },
        methods: {
            init() {
                this.loadData();
            },
            loadData(){
                const {page, rows} = this.page
                collegeApi.getList("","",page,rows).then(res=>{
                    this.tableData=res.data.rows;
                    this.page.total = res.data.total
                }).catch(error=>this.$message.error(error));
            },
            del(row){
                this.$confirm('是否删除', '删除').then(() => {
                    collegeApi.deleteItem(row.id).then(res=>{
                        if(res.data.status.toLowerCase()=='ok'){
                            this.$message.success("删除成功");
                        }else{
                            this.$message.success("删除失败");
                        }
                        this.loadData();
                    }).catch(error=>{
                        this.$message.success("删除失败");
                        this.loadData();
                    })
                })
            },
            edit(data){
                this.formData = data;
                this.formDataVisible = true;
            },
            add(){
                this.formData = {
                    desc: null,
                    id: "",
                    majors: [{id: "", name: "", desc: "", pid: null}],
                    name: "",};
                this.formDataVisible = true;
            },
            addMajor(data){
                this.formData = data;
              this.majorDataVisible = true;
              this.major = {id: "", name: "", desc: "", pid: data.id};
            },
            showMajor(data){
                this.formData = data;
                this.majorTableVisible = true;
            },
            eidtMajor(data){
              this.majorDataVisible = true;
              this.major = data;
            },
            delMajor(data){
                this.$confirm('是否删除', '删除').then(() => {
                    collegeApi.delMajor(data.id).then(res=>{
                        if(res.data.status.toLowerCase()=='ok'){
                            this.$message.success("删除成功");
                        }else{
                            this.$message.success("删除失败");
                        }
                        this.loadData();
                    }).catch(error=>{
                        this.$message.success("删除失败");
                        this.loadData();
                    })
                })
            },
            submitMajorEvent(){

              this.majorDataVisible = false;
              collegeApi.addItemMajor(this.major).then(res=>{
                  if(res.data.status.toLowerCase()==='ok'){
                      this.$message.success("添加成功");
                  }else{
                      this.$message.success("添加失败");
                  }
                  this.majorDataVisible = false;
                  this.loadData();
              }).catch(error=> {
                  this.$message.success("添加失败");
                  this.loadData();
                  this.majorDataVisible = false;
              })
            },
            handleSizeChange(val) {
                this.page.rows = val
                this.page.page = 1
                this.loadData()
            },
            handlePageNumChange(val) {
                this.page.page = val
                this.loadData()
            },
            submitEvent(){
                if(this.formData.start){
                    this.formData.start = commonMethod.formatDate2(this.formData.start);
                }
                if(this.formData.end){
                    this.formData.end = commonMethod.formatDate2(this.formData.end);
                }
              collegeApi.addItem(this.formData).then(res=>{
                  if(res.data.status.toLowerCase()==='ok'){
                      this.$message.success("添加成功");
                  }else{
                      this.$message.success("添加失败");
                  }
                  this.formDataVisible = false;
                  this.loadData();
              }).catch(error=> {
                  this.$message.success("添加失败");
                  this.loadData();
                  this.formDataVisible = false;
              })
            },
            getFile(file) {

                this.getBase64(file.raw).then(res => {
                    this.formData.img = res;
                });
            },
            getBase64(file) {
                return new Promise(function(resolve, reject) {
                    let reader = new FileReader();
                    let imgResult = "";
                    reader.readAsDataURL(file);
                    reader.onload = function() {
                        imgResult = reader.result;
                    };
                    reader.onerror = function(error) {
                        reject(error);
                    };
                    reader.onloadend = function() {
                        resolve(imgResult);
                    };
                });
            },
        }
    }
</script>

<style>
    .header {
        height: 60px;
        width: 100%;
    }

    .main {
        height: calc(100% - 180px);
    }

    .table {
        width: calc(100% - 40px);
        height: calc(100% - 60px);
    }

    .main-footer {
        height: 40px;
        width: 100%;
    }
</style>